<template>
  <div class="adjust">
    <el-tabs v-model="selectValue"   @tab-click="handleClick">
      <el-tab-pane label="所有业务" name="1">
        <div v-html="title"></div>
      </el-tab-pane>
      <el-tab-pane label="未生效" name="2">
        <div v-html="title"></div>
      </el-tab-pane>
      <el-tab-pane label="执行中" name="3">
        <div v-html="title"></div>
      </el-tab-pane>
    </el-tabs>
    <div class="adjustContent">
      <BusinessList ref="businessList" :typeFather="selectValue"></BusinessList>
    </div>
  </div>
</template>
<script>
import BusinessList from './businessList'
// import NoBusinessList from './noBusinessList.vue'
// import DoingBusinessList from './doingBusinessList.vue'

export default {
  components: {
    BusinessList
  },
  props: {
    processType1: {
      type: Number,
      default: 1
    }
  },
  provide () {
    return {
      processType: this.processType1
    }
  },
/*  watch: {
    processType1 (val) {
      this.$nextTick(() => {
        console.log(val)
      })
    }
  }, */
  data () {
    return {
      selectValue: '1',
      title: '<span style="font-size:20px"></span>'
    }
  },
  methods: {
    // 改变不同的状态展示数据
    handleClick (tab, event) {
      let name = tab.name
      this.selectValue = name
      console.log(name)

      /* 1 所有业务
      *  2 未生效
      *  3 执行中
      * */
      name === '1' && this.$refs.businessList.getDictModelList(1)
      this.$refs.businessList.resetPagination()
      this.$refs.businessList.getList()
    }
  },
  activated () {
    this.$refs.businessList.getDictModelList(1)
    this.$refs.businessList.getList()
  }

}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/config.scss';

::v-deep.adjust {
  margin: -20px;

  > .el-tabs {
    > .el-tabs__header {
      margin-bottom: 0;

      .el-tabs__item {
        width: 150px;
        height: 50px;
        line-height: 48px;
        border: 1px solid transparent;
        /*border-radius: 6px 0px 0px 0px;*/
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        text-align: center;
        padding: 0;
      }

      .el-tabs__item.is-active {
        background: $--color-primary-liyu;
        border-color: #EEEEEE;
        color: #FFFFFF;
      }

      .el-tabs__active-bar {
        display: none;
      }

      .el-tabs__nav-wrap::after {
        height: 1px;
        background: #EEEEEE;
      }
    }

    > .el-tabs__content {
      padding: 20px;
    }
  }
  .adjustContent{
    padding:0 20px;
    box-sizing: border-box;
    margin-top: -20px;
  }
}

</style>
